<template>
  <div>
    <el-form style="width:40%;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="编号" prop="id">
        <el-input v-model="ruleForm.id" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="年龄/月" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-input v-model="ruleForm.sex"></el-input>
      </el-form-item>

      <el-form-item label="分类" prop="cat_sort">
        <el-input v-model="ruleForm.cat_sort"></el-input>
      </el-form-item>

      <el-form-item label="身高" prop="height">
        <el-input v-model="ruleForm.height"></el-input>
      </el-form-item>

      <el-form-item label="体重" prop="weight">
        <el-input v-model="ruleForm.weight"></el-input>
      </el-form-item>

      <el-form-item label="图片路径" prop="pic">
        <el-input v-model="ruleForm.pic"></el-input>
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item label="支持优惠码" prop="is_coupon">
        <el-input v-model="ruleForm.is_coupon"></el-input>
      </el-form-item>

      <el-form-item label="销售量" prop="sale_count">
        <el-input v-model="ruleForm.sale_count"></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="memo">
        <el-input v-model="ruleForm.memo"></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="details">
        <el-input v-model="ruleForm.details"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="info" @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "PetUpdate",
    data() {
      return {
        ruleForm: {
          id: '',
          age: '',
          sex: '',
          cat_sort: '',
          height: '',
          weight: '',
          pic: '',
          price: '',
          is_coupon: '',
          sale_count: '',
          details: '',
          memo: ''
        },
        rules: {
          age: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          sex: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        options2: [{  // 优惠码
          value: '支持',
          label: '支持'
        }, {
          value: '不支持',
          label: '不支持'
        }],
        options3: [// 身高
          {
            value: '20cm以内',
            label: '20cm以内'
          }, {
            value: '20-30cm',
            label: '20-30cm'
          }, {
            value: '30-40cm',
            label: '30-40cm'
          }, {
            value: '40-50cm',
            label: '40-50cm'
          }, {
            value: '50cm以上',
            label: '50cm以上'
          }],
        options4: [// 体重
          {
            value: '100-700g',
            label: '100-700g (0-2个月)'
          }, {
            value: '700g-1kg',
            label: '700g-1kg (2-12个月)'
          }, {
            value: '1-3kg',
            label: '1-3kg (1-5岁)'
          }, {
            value: '3-5.5kg',
            label: '3-5.5kg (5-7岁)'
          }, {
            value: '5.5-8kg',
            label: '5.5-8kg (7-9岁)'
          }, {
            value: '8kg以上',
            label: '8kg以上 (9岁以上)'
          }]
      };
    },
    methods: {
      cancel() {
        this.$router.go(-1)
      },
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.put('http://localhost:9000/cat/update', this.ruleForm).then(function (resp) {
              console.log(resp)
              if (resp.data == 'success') {
                _this.$alert('编号<' + _this.ruleForm.id + '>已修改', '消息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    _this.$router.push('/user/petManage')
                  }
                });
              }
            });
          } else {
            return false;
          }
        })
      }
    },
    created() {
      const _this = this
      this.$axios.get('http://localhost:9000/cat/findById/' + this.$route.query.id).then(function (resp) {
        _this.ruleForm = resp.data
      })
    }
  }
</script>

<style scoped>

</style>
